<template>
  <div class="page">
    <el-row>
      <el-form :inline="true">
        <div style="float:left">
          <el-form-item label="日期" v-role="0x090401">
            <div class="block">
              <el-date-picker v-model="chooseDate" class="daterange-large" @change="chooseDateRange" type="daterange" placeholder="请选择日期" :editable="false" range-separator="~">
              </el-date-picker>
            </div>
          </el-form-item>
          <!--按钮区域-->
          <el-button @click="searchBatchManage">搜索</el-button>
          <el-button @click="resetBatchId" v-role="0x090402" v-if="currentStatus.sysStatus==='失败'">批次号重置</el-button>
          <el-button @click="checkFail" v-role="0x090403" v-if="currentStatus.sysStatus==='失败'">审核失效</el-button>
          <el-button @click="expireOut" v-role="0x090405" v-if="currentStatus.sysStatus==='失败'">到期流出</el-button>
        </div>
        <div style="float:right;line-height:40px;margin-right:10px">
          <span style="margin-right:10px">当前系统日期 : {{currentStatus.date}}</span>
          <span>当前状态 :<span :class="{fail:(currentStatus.sysStatus==='失败')}"> {{currentStatus.sysStatus}}</span></span>
        </div>
      </el-form>
    </el-row>

    <data-box ref="databox" :params="params" hiddenForm :server="server.search" autoSearch>
      <template slot="column">
        <!--数据列区域-->
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="batchName" label="批量名称" min-width="80">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" min-width="100">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="100">
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="100" :show-overflow-tooltip="true">
          <template scope="scope">
            <span v-if="scope.row.status===0">成功</span>
            <span v-if="scope.row.status===1" style="color:red">失败</span>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </div>
</template>

<script>
  import DataBox from '@/components/DataBox'
  import servers from '@/config/servers'
  import net from '@/util/net'

  export default {
    name: 'batch-manage',
    data() {
      return {
        server: {
          search: servers.SystemManage.get_batch_manage,
          handleBatchSeq: servers.SystemManage.handle_batch_seq,
          handleBatchFailure: servers.SystemManage.handle_batch_failure,
          handleBatchOutflow: servers.SystemManage.handle_batch_outflow,
          getStatus: servers.SystemManage.get_status
        },
        params: {
          sort: 'startTime,desc',
          batchName: '',
          startDate: '',
          endDate: ''
        },
        chooseDate: [],
        currentStatus: ''
      }
    },
    methods: {
      /**
       * 搜索按钮
       */
      searchBatchManage() {
        this.$refs['databox'].searchClick()
      },
      /**
       * 获取跑批状态和系统时间
       */
      getBatchStatus() {
        net.send({
          server: this.server.getStatus
        }).then((data) => {
          this.currentStatus = data
        })
      },
      /**
       * 批次号重置按钮事件
       */
      resetBatchId() {
        this.$confirm('您确定要手工批量吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          net.send({
            server: this.server.handleBatchSeq
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.$refs['databox'].refresh()
            this.getBatchStatus()
          })
        })
      },
      /**
       * 审核失效按钮事件
       */
      checkFail() {
        this.$confirm('即将审核失效！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          net.send({
            server: this.server.handleBatchFailure
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.$refs['databox'].refresh()
            this.getBatchStatus()
          })
        })
      },
      /**
       * 到期流出按钮事件
       */
      expireOut() {
        this.$confirm('您确定要到期流出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          net.send({
            server: this.server.handleBatchOutflow
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.$refs['databox'].refresh()
            this.getBatchStatus()
          })
        })
      },
      /**
       * 获取日期范围
       */
      chooseDateRange() {
        console.log(this.chooseDate)
        if (this.chooseDate[0] === null) {
          this.params.startDate = ''
          this.params.endDate = ''
        } else {
          this.params.startDate = this.chooseDate[0]
          this.params.endDate = this.chooseDate[1]
        }
      }
    },
    activated() {
      this.getBatchStatus()
    },
    components: {
      DataBox
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .fail {
    color: red
  }

</style>
